<template>
  <div class="person">
    <h2>情况三：监视【reactive】定义的【对象类型】数据</h2>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeName">修改名字</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import { reactive,watch } from 'vue'
  //数据
  let person = reactive({
    name: '张三',
    age: 18
  })
  //方法
  function changeAge() {
    person.age += 1
  }
  function changeName() {
    person.name += '~' 
  }
  function changePerson() {
    Object.assign(person,{name: '王五',age: 60})
    }
  //监视，情况三：监视【reactive】定义的【对象类型】数据，默认是开启深度监视的且不能关闭
  watch(person, (newValue, oldValue) => {
    console.log('person改变了',newValue, oldValue)
  })
</script>
<style scoped>
.person {
    /* 背景颜色 */
    background-color: skyblue;
    /* 阴影 */
    box-shadow: 0 0px 10px;
    /* 圆角 */
    border-radius: 4px;
    padding: 20px; /* 内边距 */
}
button { 
    margin: 0 5px;
}
</style>


